<template>
  <div class="h-full">
    <n-card class="h-full shadow-sm rounded-16px" title="Tab Detail" size="small">
      <n-form
        ref="formRef"
        inline
        :label-width="80"
        :model="formValue"
        :rules="rules"
        size="small"
        @submit="handleValidateSubmit"
      >
        <n-form-item label="订单号" path="orderID">
          <n-input v-model:value="formValue.orderID" placeholder="订单号" />
        </n-form-item>
        <n-form-item label="类型">
          <n-select v-model:value="formValue.type" :options="options" clearable class="w-200px" />
        </n-form-item>
        <n-form-item>
          <n-button attr-type="submit">验证</n-button>
        </n-form-item>
        <n-form-item>
          <n-button attr-type="button" @click="resetFormValue">重置</n-button>
        </n-form-item>
      </n-form>
      <n-space :vertical="true" :size="12">
        <div>当前路由的描述数据(meta)：</div>
        <pre>{{ route.meta }}</pre>
        <div>当前路由的查询数据(query)：</div>
        <pre>{{ route.query }}</pre>
        <div>表单：</div>
        <pre>{{ formValue }}</pre>
        <div>表单数据是否改变：</div>
        <pre>{{ formEdited }}</pre>
        <n-button @click="handleToTab">返回Tab</n-button>
      </n-space>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onActivated } from 'vue';
import { useRoute } from 'vue-router';
import type { FormInst } from 'naive-ui';
import { useMessage } from 'naive-ui';
import { useTitle } from '@vueuse/core';
import { useTabStore } from '@/store';
import { useRouterPush } from '@/composables';

const options = [
  {
    label: "Everybody's Got Something to Hide Except Me and My Monkey",
    value: 'song0',
    disabled: true
  },
  {
    label: 'Drive My Car',
    value: 'song1'
  },
  {
    label: 'Norwegian Wood',
    value: 'song2'
  },
  {
    label: "You Won't See",
    value: 'song3',
    disabled: true
  },
  {
    label: 'Nowhere Man',
    value: 'song4'
  },
  {
    label: 'Think For Yourself',
    value: 'song5'
  },
  {
    label: 'The Word',
    value: 'song6'
  },
  {
    label: 'Michelle',
    value: 'song7',
    disabled: true
  },
  {
    label: 'What goes on',
    value: 'song8'
  },
  {
    label: 'Girl',
    value: 'song9'
  },
  {
    label: "I'm looking through you",
    value: 'song10'
  },
  {
    label: 'In My Life',
    value: 'song11'
  },
  {
    label: 'Wait',
    value: 'song12'
  }
];

const { toHome } = useRouterPush();
function handleToTab() {
  toHome();
}

const route = useRoute();
const tabStore = useTabStore();
const orderKey: any = route.query.key;

const message = useMessage();
const formRef = ref<FormInst | null>(null);
const formInitValue: any = { orderID: orderKey, type: 'song11' };
const formValue: any = ref({ ...formInitValue });
const rules: any = {
  orderID: {
    required: true,
    message: '请输入订单号',
    trigger: ['input']
  }
};
function resetFormValue() {
  formValue.value = { ...formInitValue };
}
function handleValidateSubmit(e: any) {
  e.preventDefault();
  formRef.value?.validate(errors => {
    if (!errors) {
      message.success('Valid');
    } else {
      // eslint-disable-next-line no-console
      // console.log(errors);
      message.error('Invalid');
    }
  });
}

// 根据计算表单数据是否有变化，修改tab和window标题
const formEdited: any = computed(() => {
  const edited: any = Object.keys(formValue.value).some(field => formValue.value[field] !== formInitValue[field]);
  return `${edited ? '*' : ''}编辑 ${orderKey}`;
});
function setTitle() {
  tabStore.setActiveTabTitle(formEdited);
  useTitle(formEdited);
}

onActivated(() => {
  setTitle();
});
</script>

<style scoped></style>
